| |
| 次に、インラインフレーム内に表示するHTMLファイル（「endroll.html」）を作成します。このHTMLでは、BODYタグにonloadイベントを追加し、ページが表示されると同時にJavaScript関数「scroll()」を実行させます。関数「scroll()」では、初めに「window.scrollTo(0,0)」で画面の表示位置を左上端にリセットします。続いて、setInterval()でwindow.scrollBy()を繰り返し実行し、画面を少しずつスクロールさせていきます。window.scrollBy()のカッコ内には、X軸方向の移動量とY軸方向の移動量をピクセル数で指定してください。また、setInterval()のカッコ内には、実行するJavaScript（今回の例では「window.scrollBy()」）、および繰り返し間隔をミリ秒で指定します。そのほか、文字がインラインフレームの下端から表示されるように、ページの先頭に空白スペース用のDIVタグを挿入しておく必要もあります。DIVタグの高さはスタイルシートで指定し、インラインフレームの高さと同じになるように調整します |
【endroll.html】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<BODY bgcolor="#000000" text="#FFFFFF" onload="scroll()">
<DIV style="height:150px; margin:0px; padding:0px"></DIV>
<DIV align="center">
<H2>魅せるホームページ作成講座</H2><BR>
<H3>【公開日】</H3>
2006年03月04日<BR><BR><BR>
<H3>【製作協力】</H3>
isweb編集チーム<BR><BR><BR>
<H3>【監督】</H3>
楽天 太郎<BR><BR><BR>
Copyright (c) 1997-2006 Rakuten, Inc. All rights reserved.
</DIV>
<SCRIPT language="JavaScript">
<!--
function scroll(){
window.scrollTo(0,0);
setInterval('window.scrollBy(0,1)',20);
}
// -->
</SCRIPT>
</BODY>
</HTML>
|
 |
|
